<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
    <script src="./jq-3.6.0.js"></script>
    <style>
        header {
            display: flex;
        }
        
        header>div {
            margin-right: 20px;
        }
        
        header>input {
            margin-right: 20px;
        }
        
        .item {
            display: flex;
        }
        
        .item>input {
            margin-right: 20px;
        }
        
        .item>div {
            margin-right: 20px;
        }
        
        .number>input {
            width: 50px;
        }
        
        footer {
            display: flex;
        }
        
        .totalNum {
            margin-left: 77px;
        }
        
        .totalPrice {
            margin-left: 50px;
        }
    </style>
</head>

<body>
    <header>
        <input type="checkbox" class="allcheck">
        <div>全选</div>
        <div>购物车</div>
    </header>
    <div class="main">
        <!-- <div class="item">
            <input type="checkbox">
            <div>芹菜</div>
            <div class="pri">
                <span>18</span>
                <span>元/斤</span>
            </div>
            <div class="number">
                <span>数量</span>
                <input type="number" min="0" value="0">
            </div>
            <div class="small-total">
                <span>小记:</span>
                <span>0</span>
            </div>
            <div>删除</div>
        </div> -->
    </div>
    <footer>
        <div>全部删除</div>
        <div class="totalNum">
            <span>总数量:</span>
            <span>0</span>
        </div>
        <div class="totalPrice">
            <span>总金额:</span>
            <span>0</span>
        </div>
    </footer>
</body>
<script>
    var goods = [{
        name: '芹菜',
        price: 19
    }, {
        name: '白菜',
        price: 15
    }, {
        name: '黄瓜',
        price: 20
    }];
    // for (var index = 0; index < goods.length; index++) {
    //     console.log(goods[index]);
    // }
    $.each(goods, function(i, e) {
        var itemDiv = $('<div class="item"></div>')
        var checkboxDiv = $('<input type="checkbox" class="check">');
        itemDiv.append(checkboxDiv);
        var goodNameDiv = $('<div></div>');
        goodNameDiv.html(e.name);
        itemDiv.append(goodNameDiv);
        var priceDiv = $('<div class="pri"><span></span><span>元/斤</span></div>')
        priceDiv.children()[0].innerHTML = e.price;
        itemDiv.append(priceDiv);
        var numberDiv = $('<div class="number"><span>数量</span><input type="number" min="0" value="0"></div>');
        numberDiv.children('input').on('click', function() {
            var number = this.value;
            var price = $(this).parent().siblings('.pri').children()[0].innerText;
            var smallTotal = number * price;
            $(this).parent().siblings('.small-total').children()[1].innerText = smallTotal;
            totalNum();
        })
        itemDiv.append(numberDiv);
        var total = $('<div class="small-total"><span>小记:</span><span>0</span></div>')
        itemDiv.append(total);
        var delDiv = $('<div>删除</div>');
        delDiv.on('click', function() {
            // $('.main').remove($(this).parent())
            $(this).parent().remove();
            totalNum();
        })
        itemDiv.append(delDiv);
        $('.main').append(itemDiv);
    })
    $('.allcheck').on('click', function() {
        $('.check').prop('checked', this.checked);
        totalNum();
    })

    // $('.check').on('click', function() {
    //     var fag = false;
    //     var checks = document.querySelectorAll('.check');
    //     for (var i = 0; i < checks.length; i++) {
    //         if (checks[i].checked == false) {
    //             fag = false;
    //             break;
    //         } else {
    //             fag = true;
    //         }
    //     }
    //     $('.allcheck').prop('checked', fag)
    // })

    $('.check').on('click', function() {

        if ($('.check:checked').length == $('.check').length) {
            $('.allcheck').prop('checked', true);
        } else {
            $('.allcheck').prop('checked', false);
        }
        totalNum();

    });

    function totalNum() {
        var totalNum = 0;
        var totalPrice = 0;
        $('.check:checked').each(function(i, e) {
            var number = $(e).siblings('.number').children()[1].value - 0;
            totalNum = totalNum + number;
            var smallTotal = $(e).siblings('.small-total').children()[1].innerText - 0;
            totalPrice += smallTotal //  totalPrice = totalPrice + smallTotal
        })
        console.log(totalNum);
        console.log(totalPrice);
        $('.totalNum').children()[1].innerHTML = totalNum;
        $('.totalPrice').children()[1].innerHTML = totalPrice;
    }
</script>

</html>